<template>
  <section class="wp-product-search">
    <Search-bar :search="searchParams" @on-search="searchProductStock">
        <el-form :model="searchParams">
            <el-row>
            <el-col :span="8">
                <el-form-item>
                    <Warehouse-search width='150px' v-model="searchParams.warehouseCode"/>
                </el-form-item>
           </el-col>
            <el-col :span="8">
            <el-form-item>
              <el-select
                :style="{width:'180px'}"
                v-model="searchParams.productType"
                placeholder="选择产品类型"
                clearable
              >
                <el-option
                  v-for="item in productTypes"
                  :label="item.bizName"
                  :value="item.bizValue"
                  :key="item.bizValue"
                ></el-option>
              </el-select>
            </el-form-item>
            </el-col>
              <el-col :span="8">
                    <el-form-item>
                    <el-input
                        :style="{width:'180px'}"
                        v-model="searchParams.productName"
                        placeholder="输入产品名称关键字"
                        ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
    </Search-bar>
    <Page-table
      ref="productTable"
      WP_TableId="productTable"
      :WP_CurrentPage="currentPage"
      :WP_PageSize="pageSize"
      :WP_List="list"
       :WP_Loading="loading"
      :WP_TotalRow="totalRow"
      :WP_PageSizes="[3, 5]"
      :WP_CurrentRowKey="'productCode'"
      @selection-change="selectionChange"
      :WP_RowKey="getRowKey">
        <el-table-column
        :selectable="checkSelect"
        type="selection"
        reserve-selection
        width="50"/>
        <el-table-column label="产品名称" prop="productName"></el-table-column>
        <el-table-column label="产品类型" prop="productType" :formatter="formatterProductType"></el-table-column>
        <el-table-column label="产品型号" prop="productModel"></el-table-column>
        <el-table-column label="产品单位" prop="unit"></el-table-column>
        <el-table-column label="所属仓库" prop="warehouseName"></el-table-column>
        <el-table-column label="库存数量" prop="stockTotal"></el-table-column>
        <el-table-column label="可用数量" prop="availableNum"></el-table-column>
        <el-table-column label="锁定数量" prop="lockedNum"></el-table-column>
    </Page-table>
    <div style="text-align:center;margin-top: 20px;">
        <el-button type="" @click.native="handleCancel">取消</el-button>
        <el-button type="success" @click.native="handleOk">确定</el-button>
    </div>
  </section>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import WarehouseSearch from '@/views/eims/components/WarehouseSeach'
import PageTable from '@/components/PageTable'
import { deepClone } from '@/utils'
import Mixins from '@/views/mixins'
import stockAPI from '@/api/eims/stockAPI'
export default {
  props: {
    plist: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {SearchBar, WarehouseSearch, PageTable},
  mixins: [Mixins],
  data () {
    return {
      pageSize: 5,
      tabelSelects: []
    }
  },
  created () {
    this.searchParams.hasDeliveryQuery = true
    this.initPageList()
  },
  methods: {
    getRowKey (row) {
      return row.id
    },
    getRequestType () {
      return stockAPI.getProductInventoryListAPI
    },
    checkSelect (row, index) {
      if (this.plist && this.plist.length > 0) {
        for (let i = 0; i < this.plist.length; i++) {
          const item = this.plist[i]
          if (item.id === row.id) {
            return false
          }
        }
      }
      return true
    },
    selectionChange (selection) {
      this.tabelSelects = [...selection]
    },
    searchProductStock () {
      this.search(this.searchParams, stockAPI.getProductInventoryListAPI)
    },
    handleCancel () {
      this.$refs.productTable.clearSelection()
      this.closeDrawer()
    },
    handleOk () {
      if (this.tabelSelects.length <= 0) {
        this.$msgBox.error('请选择出库产品')
        return
      }
      this.selectProducts = deepClone(this.tabelSelects)
      this.selectProducts.forEach(item => {
        item.remark = ''
      })
      var plist = []
      plist = [...this.selectProducts, ...this.plist]
      this.$refs.productTable.clearSelection()
      this.$emit('update:plist', plist)
    },
    closeDrawer () {
      this.$parent.$parent.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-product-search {
  width: 100%;
  padding: 20px;
}
</style>
